<template>
    <div>
        <table-search @search="search(1)" :isExtra="isEdit" :isSearch="false" @reset="reset()">
            <template slot="extra" v-if="isEdit">
                <!-- <a-button class="filter-item" icon="cloud-upload" @click="show()">导入属性</a-button> -->
                <a-button class="filter-item btn_space" type="primary" icon="plus" @click="add()">新增</a-button>
            </template>
        </table-search>
        <table-list
            :loading="loading"
            :columns="columns"
            rowKey="updateTime"
            :pagination="pagination"
            :data="list"
        >
            <template slot="attType" slot-scope="{ text }">
                <field-tag
                    :value="text"
                    type="value"
                    showType="name"
                    :data="paramTypes"
                ></field-tag>
            </template>
            <template slot="dataType" slot-scope="{ text }">
                <field-tag
                    :value="text"
                    type="value"
                    showType="name"
                    :data="dataTypes"
                ></field-tag>
            </template>
            <template slot="action" slot-scope="{ text }">
                <a-button size="small" type="primary" @click="update(text)">编辑</a-button>
                <a-button size="small" class="btn_space" @click="remove(text)">删除</a-button>
            </template>
        </table-list>

        <template v-if="isshow">
            <function-info :property="property" :productCode="proCode" :info="showInfo" @cancel="isshow = false" @submit="updateList" />
        </template>
    </div>
</template>

<script>
import table from '@/mixins/table';
import { columns,columnAction } from './columns';
import FunctionInfo from './components/info'
import {
    remoteList,
    deleteInfo
} from '@/api/product/function'
import { paramTypes, dataTypes } from '@/views/product/common/types';

export default {
    name: 'Function',
    mixins: [table],
    components:{
        FunctionInfo
    },
    props: {
        property:[],
        proCode: String,
        isEdit:{
            type:Boolean,
            default:true
        }
    },
    data() {
        return {
            paramTypes,
            dataTypes,
            columns,
            columnAction,
            isshow:false,
            showInfo:{}
        };
    },
    created(){
        if(this.isEdit){
            this.columns = [...this.columns,...this.columnAction]
        }
        this.search(1)
    },
    methods:{
        async search(page){
            try {
                this.loading = true;
                this.form.pdtCode = this.proCode;
                if (page) {
                    this.form.page = page;
                }
                this.list = [];
                let res = await remoteList(this.form);
                let { list, total } = res.data;
                this.list = list;
                this.total = total;
            } finally {
                this.loading = false;
            }
        },
        //新增
        add(){
            this.isshow = true;
            this.showInfo = {}
        },
        updateList() {
            this.isshow = false;
            this.showInfo = {};
            this.search(1);
        },
        //修改
        update(item) {
            this.isshow = true;
            this.showInfo = item;
        },
        //删除
        remove(item) {
            this.$confirm({
                title: '提示',
                content: '确定要删除该功能？',
                okText: '确定',
                cancelText: '取消',
                onOk: async () => {
                    await deleteInfo({ids:[item.id]});
                    this.$message.success('删除成功!');
                    this.search(1);
                },
                onCancel() {}
            });
        }
    },
    filters: {
        filterParam(val, data) {
            let item = data.filter(item => item.value == val);
            return item?.[0].name;
        }
    }
};
</script>
